<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form">
        <el-descriptions  title="合同信息"  :column="3" border >

          <el-descriptions-item label="合同材料"    label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >
           <el-button @click="hadledownload">下载</el-button>
          </el-descriptions-item>


        </el-descriptions>
        <br/>
        <el-descriptions  title="成果信息"  :column="3" border >
          <el-descriptions-item label="成果id"   label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.resultId }}</el-descriptions-item>
          <el-descriptions-item label="成果名称"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.resultName }}</el-descriptions-item>
          <el-descriptions-item label="完成单位"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >{{ form.completionUnit }}</el-descriptions-item>
          <el-descriptions-item label="负责人姓名"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.firstName }}</el-descriptions-item>
          <el-descriptions-item label="负责人学号"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.firstNumber }}</el-descriptions-item>
          <el-descriptions-item label="负责人联系电话"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.firstPhone }}</el-descriptions-item>
          <el-descriptions-item label="负责人身份证号"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >{{ form.firstIdnumber }}</el-descriptions-item>
         </el-descriptions>
        <br/>
        <el-descriptions  title="公司信息"  :column="3" border >
          <el-descriptions-item label="公司名称"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.enterpriseName }}</el-descriptions-item>
          <el-descriptions-item label="统一社会信用代码" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.enterpriseNumber }}</el-descriptions-item>
          <el-descriptions-item label="法人姓名"  label-class-name="my-label":contentStyle='contentStyle'  :labelStyle="labelStyle" >{{ form.corporateName }}</el-descriptions-item>
          <el-descriptions-item label="法人联系电话"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.corporateNumber }}</el-descriptions-item>
          <el-descriptions-item label="法人身份证号"  label-class-name="my-label" :labelStyle="labelStyle" >{{ form.corporateNumber }}</el-descriptions-item>
        </el-descriptions>

    <!--    <el-descriptions  title="公示信息"  :column="3" border >
          <el-descriptions-item label="公示内容"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.publicizeContent }}</el-descriptions-item>
          <el-descriptions-item label="公示题目" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.publicizeTitle }}</el-descriptions-item>
          <el-descriptions-item label="公示人姓名"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.publicizeName }}</el-descriptions-item>
          <el-descriptions-item label="公示人工号"  label-class-name="my-label" :labelStyle="labelStyle" >{{ form.publicizeNumber }}</el-descriptions-item>
          <el-descriptions-item label="公示时间"  label-class-name="my-label" :labelStyle="labelStyle" >{{ form.remark }}</el-descriptions-item>

        </el-descriptions>-->
        <br>
        <el-descriptions  title="审核信息"  :column="3" border >
          <el-descriptions-item label="申请人一姓名"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.applyName1 }}</el-descriptions-item>
          <el-descriptions-item label="申请人一学号" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.applyNumber1 }}</el-descriptions-item>
          <el-descriptions-item label="申请一时间"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.applyTime1 }}</el-descriptions-item>
          <el-descriptions-item label="审核一状态"  label-class-name="my-label" :labelStyle="labelStyle" >


            <dict-tag :options="dict.type.cxcy_audit_status" :value="form.auditState1"/>
          </el-descriptions-item>
          <el-descriptions-item label="审核一时间"  label-class-name="my-label" :labelStyle="labelStyle" >{{ form.auditTime1 }}</el-descriptions-item>
          <el-descriptions-item label="审核一姓名"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.auditName1 }}</el-descriptions-item>
          <el-descriptions-item label="审核人一工号" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.auditNumber1 }}</el-descriptions-item>
       <!--   <el-descriptions-item label="申请人二姓名"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.applyName2 }}</el-descriptions-item>
          <el-descriptions-item label="申请人二工号"  label-class-name="my-label" :labelStyle="labelStyle" >{{ form.applyNumber2 }}</el-descriptions-item>
          <el-descriptions-item label="申请二时间"  label-class-name="my-label" :labelStyle="labelStyle" >{{ form.applyTime2 }}</el-descriptions-item>

          <el-descriptions-item label="审核二状态"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.auditState2 }}</el-descriptions-item>
          <el-descriptions-item label="审核二时间" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.auditTime2 }}</el-descriptions-item>
          <el-descriptions-item label="审核人二姓名"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.auditName2 }}</el-descriptions-item>
          <el-descriptions-item label="审核人二工号"  label-class-name="my-label" :labelStyle="labelStyle" >{{ form.auditNumber2 }}</el-descriptions-item>
-->
        </el-descriptions>

      </el-form>
      <br/>
      <div style="float:right; margin-bottom: 15px;">
        <el-button @click="viewCancel">返 回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { listContract, getContract, delContract, addContract, updateContract } from "@/api/module/gs/contract";
  import { saveAs } from 'file-saver';
export default {
  name: "Notification",
  dicts: ['cxcy_audit_status'],
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 合同信息表格数据
      contractList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        materialsAddress: null,
        applyName1: null,
        applyNumber1: null,
        applyTime1: null,
        auditState1: null,
        auditTime1: null,
        auditName1: null,
        auditNumber1: null,
        applyName2: null,
        applyNumber2: null,
        applyTime2: null,
        auditState2: null,
        auditTime2: null,
        auditName2: null,
        auditNumber2: null,
        publicizeTime: null,
        publicizeContent: null,
        publicizeTitle: null,
        publicizeName: null,
        publicizeNumber: null,
        resultId: null,
        resultName: null,
        completionUnit: null,
        firstName: null,
        firstNumber: null,
        firstPhone: null,
        firstIdnumber: null,
        enterpriseNumber: null,
        enterpriseName: null,
        corporateName: null,
        corporatePhone: null,
        corporateNumber: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },

  created() {
    const id = this.$route.query.id;
    if (id) {
      // 获取表详细信息
      getContract(id).then(res => {
        this.form = res.data;
      });

    }
  },
  methods: {
    hadledownload(){
  /*const materialsAddress = this.form.materialsAddress;

        window.open(materialsAddress);
*/
// 默认方法
      const materialsAddress = this.form.materialsAddress;

      const xhr = new XMLHttpRequest();
      xhr.open('GET', materialsAddress, true);
      xhr.responseType = 'blob';
      xhr.setRequestHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36');
      xhr.onload = function () {
        if (xhr.status === 200) {
          const contentType = xhr.response.type;
          const contentDisposition = xhr.getResponseHeader('Content-Disposition');
          let fileName = '';

          if (contentDisposition) {
            const fileNameMatch = contentDisposition.match(/filename="(.*?)"/);
            if (fileNameMatch.length > 1) {
              fileName = fileNameMatch[1];
            }
          }

          if (!fileName) {
            // 如果从响应头中没有解析出文件名，则从 URL 中获取文件名
            const urlSplit = materialsAddress.split('/');
            fileName = urlSplit[urlSplit.length - 1];
          }

          saveAs(xhr.response, fileName);
        } else {
          console.error('文件下载失败');
        }
      };
      xhr.send();


    },
    /** 关闭按钮 */
    viewCancel() {
      const id = this.$route.query.id;
      getContract(id).then(response => {
        this.form = response.data;
      });
      const obj = {path: "/wodehetong", query: {id}};
      this.$tab.closeOpenPage(obj);
  },

 }
};
</script>
<style lang="scss" scoped>

</style>
